<template>
  <div>
    <el-dialog title="新增返利产品" :visible.sync="dialogFormVisible" :before-close="close" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" >
      <el-form-item label="投资类型" :label-width="formLabelWidth">
        <el-radio-group v-model="form.investType">
          <el-radio  label='0'>首投</el-radio>
          <el-radio  label='1'>复投</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="起投金额" :label-width="formLabelWidth" prop="subscriptionOrigin">
        <el-col :span="16">
          <el-input v-model="form.subscriptionOrigin" auto-complete="off"></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px">元</el-col>
      </el-form-item>
      <el-form-item label="项目类型" :label-width="formLabelWidth" prop="projectType">
        <el-col :span="16">
          <el-input v-model="form.projectType" auto-complete="off"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="项目编码" :label-width="formLabelWidth" prop="productNo">
        <el-col :span="16">
          <el-input v-model="form.productNo" auto-complete="off"


                    :readonly="true"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button v-if="form.productNo === null || form.productNo === ''" type="primary" icon="el-icon-edit" @click="getProductNo()">获取编号</el-button>
        </el-col>
      </el-form-item>


      <el-form-item label="投资期限" :label-width="formLabelWidth" prop="term">
        <el-col :span="16">
          <el-input v-model="form.term" auto-complete="off"></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px">天</el-col>
      </el-form-item>
      <el-form-item label="返利金额" :label-width="formLabelWidth" prop="profit">
        <el-col :span="16">
          <el-input v-model="form.profit" auto-complete="off"></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px">元</el-col>
      </el-form-item>
      <el-form-item label="返利比例" :label-width="formLabelWidth" prop="prodProfitPercent">
        <el-col :span="16">
          <el-input v-model="form.profitPercent" auto-complete="off" ></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px">%</el-col>
      </el-form-item>
      <el-form-item label="比例上限" :label-width="formLabelWidth" prop="profitPercentMax">
        <el-col :span="16">
          <el-input v-model="form.profitPercentMax" auto-complete="off"  ></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px">元</el-col>
      </el-form-item>
      <el-form-item label="是否最高返利" :label-width="formLabelWidth">
        <el-radio v-model="form.isMaxRebate" label="YES">是</el-radio>
        <el-radio v-model="form.isMaxRebate" label="NO">否</el-radio>
      </el-form-item>
      <el-form-item label="综合利率" :label-width="formLabelWidth" prop="allInRate" >
        <el-col :span="16">
          <el-input v-model="form.allInRate" auto-complete="off"></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px">%</el-col>
      </el-form-item>
      <el-form-item label="超级返金额" :label-width="formLabelWidth" prop="extraProfit">
        <el-col :span="16">
          <el-input v-model="form.extraProfit" auto-complete="off" ></el-input>
        </el-col>
        <el-col :span="8" style="padding-left: 10px">元</el-col>

      </el-form-item>
      <el-form-item label="超级返时间" :label-width="formLabelWidth">
        <el-date-picker
          v-model="extraDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
    </el-dialog>
  </div>
</template>
<script>
import { productSave, productDetail } from 'api/product'
import moment from 'moment'
import { retailersGetNo } from 'api/retailers'
import { rules } from '../config'
export default {
  data() {
    return {
      dialogFormVisible: true,
      form: {
        companyId: sessionStorage.getItem('businessId'), // 商家Id
        investType: '0', // 投资类型 首投0  复投1
        projectType: '', // 项目类型
        subscriptionOrigin: '', // 起投金额
        term: '', // 投资期限
        profitPercent: '', // 返利比例
        profitPercentMax: '', // 比例上限
        profit: '', // 返利金额
        extraProfit: '', // 超级返金额
        dateEnd: '', // 结束时间
        dateStart: '', // 开始时间
        extraBeginDate: '', // 超级返开始时间
        extraEndDate: '', // 超级返结束时间
        productType: 1, // 产品类型
        isMaxRebate: 'NO',
        productNo: '',
        allInRate: ''
      },
      extraDate: [],
      date: [],
      formLabelWidth: '120px',
      rules: rules
    }
  },
  watch: {
    extraDate(val) {
      if (val === null) {
        this.form.extraBeginDate = ''
        this.form.extraEndDate = ''
      } else {
        this.form.extraBeginDate = moment(val[0]).format('YYYY-MM-DD HH:mm:ss')
        this.form.extraEndDate = moment(val[1]).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  },
  created() {
    if (sessionStorage.getItem('productId')) {
      this.getProductDetail()
    }
  },
  methods: {
    async getProductNo() {
      if (this.form.projectType != null && this.form.projectType !== '') {
        try {
          let back = await retailersGetNo(this.form.projectType)
          back = back.data
          if (back.resultCode === '200') {
            console.log('productNo = ' + back.result)
            this.form.productNo = back.result
          } else {
            this.$alert('出错了：' + back.msg, '提示')
          }
        } catch (err) {
          this.$alert('请求出错', '提示')
        }
      } else {
        this.$alert('项目名称为空，无法获取', '提示')
      }
    },
    async getProductDetail() {
      try {
        let back = await productDetail(sessionStorage.getItem('productId'))
        back = back.data
        if (back.resultCode === '200') {
          console.log(back.result)
          this.form.companyId = back.result.companyId
          this.form.productName = back.result.productName
          this.form.investType = back.result.investType.toString()
          this.form.subscriptionOrigin = back.result.subscriptionOrigin
          this.form.term = back.result.term
          this.form.projectType = back.result.projectType
          this.form.profitPercent = back.result.profitPercent
          this.form.profitPercentMax = back.result.profitPercentMax
          this.form.extraProfit = back.result.extraProfit
          this.form.dateStart = back.result.dateStart
          this.form.dateEnd = back.result.dateEnd
          this.form.profit = back.result.profit
          this.form.productId = back.result.productId
          this.form.isMaxRebate = back.result.isMaxRebate
          this.form.allInRate = back.result.allInRate
          this.form.productNo = back.result.productNo
          if (back.result.extraBeginDate == null || back.result.extraBeginDate === '' || back.result.extraEndDate === null || back.result.extraEndDate === '') {
            this.extraDate = null
          } else {
            this.extraDate = [back.result.extraBeginDate, back.result.extraEndDate]
          }
        }
      } catch (err) {
        this.$alert('请求出错' + err, '提示')
      }
    },
    async submit() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          this.form.companyId = sessionStorage.getItem('businessId')
          try {
            const back = await productSave(this.form)
            console.log(back)
            this.$emit('update')
          } catch (err) {
            this.$alert('请求出错', '提示')
          }
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
